<template>
	<div class="home_ban">
		<div class="m_banner clearfix" id="my_banner" style="height: 200px;">
			<mt-swipe :auto="4000">
				<mt-swipe-item v-for="(item, index) in bannerList" :key='index'>
					<img :src="root + item.Path" alt="" style="height: 200px;width: 100%;border-radius: 10px;" />
				</mt-swipe-item>
			</mt-swipe>
		</div>
	</div>
</template>
<script>
	export default {
		created() {
			this.getBannerData();
		},
		data() {
			return {
				root: this.root,
				bannerList: [],
				swiperOption: {
					initialSlide: 0,
					pagination: {
						el: '.swiper-pagination',
					},
					loop: true,
					speed: 400,
					autoplay: {
						delay: 4500,
						disableOnInteraction: false,
					},
					observer: true, //修改swiper自己或子元素时，自动初始化swiper
					observeParents: true //修改swiper的父元素时，自动初始化swiper
				}
			}
		},
		methods: {
			getBannerData() {
				var _this = this;
				_this.$http.get('/Client/Banners', null, localStorage.Authorization, res => {
					console.log('轮播图res', res)
					if(res.code === 200) {
						_this.bannerList = res.data.list
					} else if(res.code === 101) {
						localStorage.fromPath = _this.$route.fullPath
						_this.$router.push({
							path: '/login'
						})
					}
				})
			},
		}

	}
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
	.home_ban {
		padding: 6px 6px;
		box-sizing: border-box
	}
</style>